<div class="container-fluid">
    <div class="toolbar">
        <button class="btn btn-sm btn-success" id="add-bush-btn" data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-type="add">添加</button>
    </div>

    <table id="table"></table>
</div>


<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="form-title"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="form-name"  class="control-label">名称：</label>
                        <input type="text" class="form-control" id="form-name">
                    </div>

                    <div class="form-group">
                        <label for="form-type"  class="control-label">表单类别：</label>
                        <select id="form-type" class="form-control">
                            <option value="1">问卷</option>
                            <option value="2">试卷</option>
                        </select>
                       
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="share-modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">分享</h4>
            </div>
            <div class="modal-body">
                <div class="form-title"><span>标题：</span><span id="form-title-name">哈哈</span></div>
                <div id="qrcode"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<style>

    #qrcode>img{
        width: 120px;
        height: 120px;
        margin: 0 auto
    }
    .form-title{
        text-align: center;
        margin-bottom: 10px;
    }
    .form-title>span:first-child{
        font-weight: bold;
    }
    .form-title>span{
        display: inline-block;

    }
</style>

<script>
    $(function () {

        let app={
            tableObj:$('#table'),
            modal:$('#modal-form'),
            formTypeObj:$('#form-type'),
            formNameObj:$('#form-name'),
            btnSubmitObj:$('#submit'),
            shareModal:$('#share-modal-form'),
            qrcode :new QRCode("qrcode"),
            formTitleNameObj:$('#form-title-name'),
            init:function (){
                let self=this;
                self.initTable();
                self.event();
            },
            initTable:function (){
                let self=this;
                self.tableObj.destroyTable().initTable({
                    url: '/admin/form/page',
                    columns: [
                        {
                            title: '名称',
                            visible: true,
                            align: 'center',
                            field: 'name',
                            valign: 'middle',
                            width:"15%"

                        },
                        {
                            title: '类型',
                            field: 'type',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%",
                            formatter: function (value, row, index) {
                                 if(value===1){
                                     return "<span class='btn-success btn-sm'>问卷</span>"
                                 }
                                 if(value===2){
                                     return "<span class='btn-info btn-sm'>试卷</span>"
                                 }
                                 return "---"
                            }
                        },
                        {
                            title: '创建时间',
                            field: 'created_at',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%"
                        },
                        {
                            title: '更新时间',
                            field: 'updated_at',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%"

                        },
                        {
                            title: '状态',
                            field: 'status',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%",

                            formatter: function (value, row, index) {

                                if(value===1){
                                    return "正常"
                                }
                                if(value===2){
                                    return "停用"
                                }
                                return "---"

                            }
                        },
                        {
                            title: '操作',
                            field: 'operator',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"25%",

                            formatter: function (value, row, index) {
                                value = row["id"]
                                let statusTxt = "启用"
                                let dataStatus = 1
                                let statusClass = "btn-primary"
                                let status = row["status"]
                                let previewUrl = "/form/" + row["uuid"]
                                if (status === 1) {
                                    dataStatus = 2
                                    statusTxt = "停用"
                                    statusClass = "btn-danger"
                                }
                                let designUrl = "/admin/form/design?id="+value+"&tag=${.tag}&ts=${.ts}";
                                let shareUrl=window.origin+"/form/" + row["uuid"];
                                let btnArr=[];
                                btnArr.push("<a class='btn btn-xs  btn-warning'  data-name='"+row["name"]+"' data-toggle='modal'  data-target='#share-modal-form' data-whatever='@mdo' data-url='"+shareUrl+"'>分享</a>");
                                btnArr.push("<a class='btn btn-xs  btn-primary'  href="+previewUrl+" >预览</a>");
                                btnArr.push("<a class='btn btn-xs form-status btn-danger' data-status='0'  data-id=" + value + ">删除</a>");
                                btnArr.push("<a  data-type='edit' class='btn btn-xs  btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id=" + value + ">编辑</a>");
                                btnArr.push("<a class='btn btn-xs form-status " + statusClass + "'  data-type='del'  data-status=" + dataStatus + "   data-id=" + value + ">" + statusTxt + "</a>");
                                btnArr.push("<a href='" + designUrl + "'  class='btn btn-xs  btn-info'  data-id=" + value + ">去设计</a>");
                                return "<div class='btn-group operator-group' >"+btnArr.join('')+"</div>"
                            }
                        }
                    ]
                });
            },
            event:function (){
                let self=this;
                self.tableObj.on('click','.form-status',function (){

                    let id=parseInt($(this).attr('data-id'));
                    let status=parseInt($(this).attr('data-status'));

                    if(status===0){
                        doPost("/admin/form/remove",{id:id,status:status},function (data){
                            self.refreshTale();
                        })
                        return
                    }

                    doPost("/admin/form/enable",{id:id,status:status},function (data){
                        self.refreshTale();
                    })
                    return

                })
                self.modal.on('show.bs.modal', function (event) {

                    let button = $(event.relatedTarget),
                        dType = button.data('type'),
                        modal = $(this),
                        formNameObj=self.formNameObj,
                        formType=self.formTypeObj,
                        id=button.data('id')
                    if(!id){
                        id=0
                    }
                    modal.attr('data-id',id);
                    modal.attr('data-type',dType);
                    if(dType==="edit"){

                        modal.find('.modal-title').text('编辑')
                        self.formTypeObj.prop("disabled",true)
                        doGet("/admin/form/find?id=" + id, function (data) {
                            formNameObj.val(data.data.name)
                            formType.val(data.data.type)

                        })
                    }else{
                        modal.find('.modal-title').text('添加');
                    }

                }).on('hide.bs.modal',function (event){
                    self.restModal();
                })

                self.shareModal.on('show.bs.modal', function (event) {

                    let button = $(event.relatedTarget),
                        dUrl = button.data('url'),
                        dName=button.data('name');

                    self.qrcode.makeCode(dUrl);
                    self.formTitleNameObj.text(dName)
                }).on('hide.bs.modal',function (event){
                    self.qrcode.clear();
                })

                self.btnSubmitObj.click(function (){

                    let modal=self.modal,
                        id=parseInt(modal.attr('data-id')),
                        formNameObj=self.formNameObj,
                        formTypeObj=self.formTypeObj,
                        dType=modal.attr('data-type');
                    switch (dType){
                        case "add":
                            doPost("/admin/form/add",{
                                "name":formNameObj.val(),
                                "type":parseInt(formTypeObj.val()),
                            },function (data) {
                                self.refreshTale();
                            })
                            break;
                        case "edit":
                            doPost("/admin/form/update",{
                                "id":id,
                                "name":formNameObj.val(),
                            },function (data) {
                                self.refreshTale();
                            })
                            break;
                    }
                });

            },
            refreshTale:function(){
                let self=this;
                self.initTable();
            },
            restModal:function(){
                let self=this;
                self.formTypeObj.prop("disabled",false)
                self.formNameObj.attr('readonly',false).val("")

            }
        }
        app.init();

    });

</script>
